

<template>
  <div class="w-[350px] border border-gray-200 bg-white p-3 shadow-md rounded-lg " @click="openDrawer">
    <Handle type="target" :position="Position.Left" />
    <div class="flex flex-col gap-y-1">
      <common-title-module />
      <CommonDisplayModule title="输入" :valueList="data?.inoutlist" />
      <CommonDisplayModule title="输出" :valueList="data?.outputjsonlist" />
      <div class="flex items-center">
        <div class="node-sub-text">模型</div>
        <div class="ml-2 node-text">{{ modelName || '未配置模型' }}</div>
      </div>
      <CommonDisplayModule title="技能" :showTooltip="false" nameLabel="name" :valueList="data?.skillJsonlist" />
    </div>
    <Handle type="source" :position="Position.Right" />
  </div>
  <LLMDrawerModule ref="drawerRef" :id="node?.id" :title="node?.node?.label" :form="data" @add="handleClickAddBtn" @remove="handleClickDeleteBtn" @cancel="onCancel" />
</template>
<script setup>
import { ref } from 'vue';
import { Handle, Position, useNode } from '@vue-flow/core';
import { flowStore } from '@/store/flow';
import { editNode } from '@/api/modules/flow';

import CommonTitleModule from '../modules/common-title-module.vue';
import CommonDisplayModule from '../modules/common-display-module.vue';
import LLMDrawerModule from '../modules/LLM-drawer-module.vue';
defineProps();
const node = useNode();

const data = ref({
  issingle: node.node.data?.issingle || 'single',
  systempromptword: node.node.data?.systempromptword || '',
  userpromptword: node.node.data?.userpromptword || '',
  outputFormat: 'text',
  selectmodel: node.node.data?.selectmodel || '',
  excepjsondata: node.node.data?.excepjsondata || {
    timeout: 60,
    retrycount: '不重试',
    excepmethod: '中断流程',
  },
  inoutlist:node.node.data?.inoutlist ||[
    {
      varname: '',
      vartype: 'String',
      varparam: '',
      vardesc: '',
    },
  ],
  outputjsonlist:node.node.data?.outputjsonlist ||[
    {
      varname: '',
      vartype: 'String',
      vardesc: '',
    },
  ],
  skillJsonlist: node.node.data?.skillJsonlist ||[],
  batchjsonlist: node.node.data?.batchjsonlist ||[],
  visualjsonlist: node.node.data?.visualjsonlist ||[],
})

const { findModelName } = flowStore();
const modelName = ref(findModelName(data.value.selectmodel));
const drawerRef = ref(null);
const openDrawer = () => {
  drawerRef.value?.init();
};


function handleClickAddBtn(listKey) {
  data.value[listKey].push({
    varname: '',
    vartype: 'String',
    varparam: '',
    vardesc: '',
  });
  node.node.data = {
    ...node.node.data,
  };
}

function handleClickDeleteBtn(listKey,index) {
  data.value[listKey].splice(index, 1);
  node.node.data = {
    ...node.node.data,
  };
}

const onCancel = async() => {
  if (data.value.selectmodel) {
    modelName.value = findModelName(data.value.selectmodel)
  }
  await editNode({data: { id: node.id, ...data.value}})
}
</script>